<script setup lang="ts">
defineOptions({
  name: "FULLSCREEN_ALL_LEADERSCREEN"
});
import { ref, onMounted, onUnmounted, computed, reactive, toRefs } from "vue";
import dayjs from "dayjs";
import PhaseOne from "./components/PhaseOne/index.vue";
const clickTimer = ref<any>(null);
const clock = ref<string>("");
onMounted(async () => {
  await init();
});
onUnmounted(() => {
  clearClock();
});
const init = async () => {
  const title = "领导驾驶舱";
  document.title = title;
  startClock();
};
// 获取当前时间
const startClock = () => {
  clearClock();
  clickTimer.value = setInterval(async () => {
    clock.value = dayjs().format("YYYY.MM.DD HH:mm:ss");
  }, 1000);
};
// 清空间接调用
const clearClock = () => {
  clearInterval(clickTimer.value);
};
</script>
<template>
  <px-scrollbar class="page-wrapper">
    <div class="screen-overview">
      <div class="screen-header">
        <div class="screen-header-title">
          <div class="screen-header-title-text"></div>
        </div>
        <div class="screen-header-time">
          <div class="screen-header-time-text">{{ clock }}</div>
        </div>
      </div>
      <div class="screen-body">
        <!-- 一期工厂 -->
        <PhaseOne />
      </div>
    </div>
  </px-scrollbar>
</template>

<style lang="scss" scoped>
.page-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(11 29 51 / 100%), rgb(11 29 51 / 100%)), rgb(255 255 255 / 100%);
}
.screen-overview {
  width: 100%;
  min-width: 1920px;

  .screen-header {
    width: 100%;
    height: 73px;
    background: url("/ifp-web-static/image/all/leadScreen/top.png") no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 10.2px;
    padding-right: 24px;
    margin-bottom: 24px;
  }
  .screen-header-title {
    width: 515px;
    height: 43px;
    padding-left: 20px;
    background: url("/ifp-web-static/image/all/leadScreen/title.png") no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
  .screen-header-title-text {
    width: 196px;
    height: 30px;
    background: url("/ifp-web-static/image/all/leadScreen/header.png") no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
  .screen-header-time {
    width: 274px;
    height: 25px;
    text-align: right;
    background: url("/ifp-web-static/image/all/leadScreen/timeBg.png") no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    margin-top: 17px;
    color: rgba(0, 157, 255, 1);
    font-family: TCloudNumber;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
  }
  .screen-header-time-text {
    position: relative;
    top: -4px;
  }
}
</style>
